<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>点线同布</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>

<body>
<div id="map"></div>
<div class="opt_panel">
    <button onclick="start()">开始绘制</button>
    <button onclick="restore()">清空绘制</button>
    <br><br>
    <div class="opt_intro">
        点击按钮开始绘制,点击鼠标右键结束绘制;<br>结束后可以点击开始绘制再次绘制；
    </div>
</div>

<script>
    //示例说明：
    //本示例展示了杆线同步的应用场景，设备绘制总量不易超过200个（最好是及时将设备保存至服务端然后渲染到栅格上）


    //自定义示例参数



    var symbolLayer;

    var isDrawing = false

    //动态线对象
    var lineSymbol = null
    //预览用的符号
    var previewPointSymbol = null

    //鼠标移动的时候，实时更新线和预览符号对应的位置
    function onMouseMove(e) {
        //获取当前位置
        let movingPoint = [e.lngLat.lng, e.lngLat.lat]

        //更新预览图标的位置
        previewPointSymbol.setGeometry(movingPoint)

        //更新点设备关联的线上对应节点的位置
        let lineGeom = lineSymbol.getGeometry()
        //最后一个位置是动态点
        lineGeom[0][lineGeom[0].length - 1] = movingPoint
        lineSymbol.setGeometry(lineGeom)
    }

    // function goBack(){
    //     let lineGeom = lineSymbol.getGeometry()
    //     //倒数第二个位置插入点
    //     lineGeom[0].splice(lineGeom[0].length - 1, 1)
    //     lineSymbol.setGeometry(lineGeom)
    // }

    //鼠标点击设备时添加节点设备，同时更新线路末端的节点坐标
    function onAddDev(e) {
        let clickPoint = [e.lngLat.lng, e.lngLat.lat]

        let lineGeom = lineSymbol.getGeometry()
        //倒数第二个位置插入点
        lineGeom[0].splice(lineGeom[0].length - 1, 0, clickPoint)
        lineSymbol.setGeometry(lineGeom)

        let pointSym = new egisV2.symbol.ElePointSymbol({
            type: 'point',//类型point or line
            devId: 'pSym' + Math.random(),//oid，psrid
            devTypeId: '103000',//设备类型
            symbolId: "2020060",//符号ID
            symbolRotate: 0,//旋转角度
            symbolSize: 2,//大小
            symbolColor: '#0000ff',//颜色
            symbolOpacity: 1,//透明度
            symbolScalable: true,//缩放
            coordinates: clickPoint,//坐标
            attributes: {index: lineGeom[0].length - 1}//这里将点设备与线设备的节点序号关联，以便后续移动设备时可以方便的找到线设备中需要更新的点
        })
        symbolLayer.addEleDevs([pointSym])
    }

    /**
     * 开始移动
     */
    function start() {


        if (!isDrawing) {
            isDrawing = true
            map.getCanvas().style.cursor = 'crosshair'
            lineSymbol = new egisV2.symbol.EleLineSymbol({
                type: 'line',//类型point or line or fill
                devId: 'b20001' + Math.random(),//oid，psrid
                devTypeId: '35421985',//设备类型
                symbolId: '2010010',//符号ID
                symbolWidth: 6,//线宽
                symbolColor: '#ff0000',//颜色
                symbolOpacity: 1,//透明度
                coordinates: [
                    [[0, 0]]
                ],//坐标
                attributes: {c: 3, d: 4}//其它属性
            })
            symbolLayer.addEleDevs([previewPointSymbol, lineSymbol])
            map.on('mousemove', onMouseMove)
            map.on('click', onAddDev)
            map.on('contextmenu', stop)
        }

    }

    /**
     * 停止绘制
     */
    function stop() {
        if (isDrawing) {
            let lineGeom = lineSymbol.getGeometry()
            //倒数第二个位置插入点
            lineGeom[0].pop()
            lineSymbol.setGeometry(lineGeom)
            symbolLayer.removeEleDevs([previewPointSymbol])
            // egisV2.removeEleDatas(map, [previewPointSymbol])
            isDrawing = false
            map.off('mousemove', onMouseMove)
            map.off('click', onAddDev)
            map.off('contextmenu', stop)
            map.getCanvas().style.cursor = ''
        }
    }

    function restore() {
        symbolLayer.removeEleDevs()
        // egisV2.removeEleDatas(map)
    }


    function initPage() {
        symbolLayer = new egisV2.layer.SymbolLayer(map)
        previewPointSymbol = new egisV2.symbol.ElePointSymbol({
            type: 'point',//类型point or line
            devId: 'preview' + Math.random(),//oid，psrid
            devTypeId: '301000',//设备类型
            symbolId: "2020060",//符号ID
            symbolRotate: 0,//旋转角度
            symbolSize: 2,//大小
            symbolColor: '#0000ff',//颜色
            symbolOpacity: 1,//透明度
            symbolScalable: true,//缩放
            coordinates: [0, 0],//坐标
            attributes: {}//其它信息
        })
    }

    window.onload = function () {
        loadGeoMap(initPage)
    }


</script>
</body>
</html>
